<template>
	<div class="rx-datepicker">
    <!-- 选择月份年份 -->
    <year @change="getYearMonth" v-if="active==='year'"
      :year="vYear" :min="min" :max="max"/>
    <!-- 选择日期 -->
    <date v-if="active==='date'"
      :year="vYear" :month="vMonth" :day="vDay" :min="min" :max="max" @choosed="getDate"/>
		<div class="rx-datepicker-bottombar" >
				<!-- <a class="btn btn-blue pointer" @click="getToday">今天</a> -->
		</div>
	</div>
</template>
<script>
import date from "./date.vue";
import year from "./year.vue";
var debugging = true;
//选择日期
export default {
  name: "rx-datepicker",
  props: {
    value: "",
    type: {
      type: String,
      default() {
        return ["date", "week", "month"][0];
      }
    },
    limit_min:'',
    limit_max:''
  },
  data() {
    var today = new Date();
    return {
      //当前选中的日期
      vYear: "",
      vMonth: "",
      vDay: "",
      //限制
      min:'',
      max:'',
      //当前是选啥
      active:'date'
    };
  },
  methods: {
    getYearMonth(){

    },
    getDate(date){
      this.$emit("resolve",date);
    },
    select(item) {
      this.$emit("select", new Date(item.year, item.month, item.day));
    },
    getToday() {
      this.$emit("select", new Date());
    }
  },
  components: {
    year,
    date
  },
  created() {
    debugging && console.log("===pickerdate created===");
    var val = this.value;
    //初始化当前值
    if (val) {
      var date = new Date(val);
      this.vYear = date.getFullYear();
      this.vMonth = date.getMonth();
      this.vDay = date.getDate();
    }
    //初始化限制-最小
    var min =this.limit_min;
    if(min){
      this.min=new Date(min)
    }
    //初始化限制-最大
    var max =this.limit_max;
    if(max){
      this.max=new Date(max)
    }
  }
};
</script>
<style lang="scss">
.rx-datepicker {
  width: 230px;
  overflow: hidden;
  /* border: 1px solid #D7DCE6; */
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.rx-datepicker-topbar {
  border-bottom: 1px solid #d7dce6;
  padding: 10px;

  .topbar-btn {
    border: 1px solid #C8CDD9;
    border-radius: 4px;
    color: #999999;
    display: inline-block;
    background: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin: 0 2px;
    vertical-align: middle;
    user-select: none;
  }
  .topbar-info {
    display: inline-block;
    width: 98px;
    text-align: center;
    line-height: 24px;
    height: 24px;
    vertical-align: middle;
  }
  .topbar-info__year,
  .topbar-info__month {
    cursor: pointer;
  }
}
.rx-datepicker-bottombar{
  height: 10px;
}
</style>

